<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.9">
    <title>在线书城管理系统</title>
    <!-- 引入bootstrap.css -->
    <link rel="stylesheet" href="./static/bootstrap-3.4.1/css/bootstrap.css">

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .my-container {
            height: 100%;
            padding: 0;
        }

        .header {
            width: 100%;
            height: 120px;
            overflow: hidden;
            background-color: #333366;
            /* background-image: url("static/img/top_bg.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%; */
        }

        .header .logo img {
            height: 70px;
            margin-top: 25px;
        }

        .user {
            padding-top: 20px;
            overflow: hidden;
            padding-right: 20px;
            text-align: right;
        }

        .user img {
            margin: 0 20px;
            width: 60px;
        }

        .body {
            padding: 0;
            width: 100%;
            height: calc(100% - 120px);
        }

        .body .menu {
            width: 180px;
            height: 100%;
            background-color: #333;
            float: left;
        }

        .body .card {
            width: calc(100% - 180px);
            height: 100%;
            float: left;
        }

        .iframe {
            border: none;
            width: 100%;
            height: 100%;
        }
    </style>
    <!-- 引入jquery.js-->
    <script src="./static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
    <!-- 引入bootstrap.js-->
    <script src="./static/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script>
        $(function(){
           setInterval(()=>{
               $("#admin").text(sessionStorage.getItem("nickname"));
           },1000)
        })

        /**
         * 退出登录
         */
        function logout(){
            // 清理掉缓存
            sessionStorage.clear();
            // 跳转到登录界面
            window.location.href = "login.html"
        }
    </script>
</head>

<body>
    <!-- 最外层是容器 -->
    <div class="container-fluid my-container">
        <!-- header:头部 -->
        <div class="header">
            <div class="row">
                <!-- logo -->
                <div class="col-md-4 logo">
                    <img src="static/img/logo_home.png" alt="">
                </div>
                <!-- 登录信息 -->
                <div class="col-md-offset-3 col-md-5 user">
                    <svg t="1652600301622" class="icon" style="position: relative;top: 5px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2807" width="20" height="20"><path d="M774.095238 652.190476m-201.142857 0a201.142857 201.142857 0 1 0 402.285714 0 201.142857 201.142857 0 1 0-402.285714 0Z" fill="#4C91FF" p-id="2808"></path><path d="M512 1024C228.571429 1024 0 795.428571 0 512S228.571429 0 512 0s512 228.571429 512 512-228.571429 512-512 512z m0-963.047619C262.095238 60.952381 60.952381 262.095238 60.952381 512s201.142857 451.047619 451.047619 451.047619S963.047619 761.904762 963.047619 512 761.904762 60.952381 512 60.952381z" fill="#fff" p-id="2809"></path><path d="M496.761905 231.619048h-18.285715c-18.285714 0-30.47619-12.190476-30.47619-30.476191V182.857143c0-18.285714 12.190476-30.47619 30.47619-30.476191h18.285715c18.285714 0 30.47619 12.190476 30.47619 30.476191v18.285714c0 18.285714-12.190476 30.47619-30.47619 30.476191z" fill="#4C91FF" p-id="2810"></path><path d="M783.238095 545.52381h-292.571428c-18.285714 0-30.47619-12.190476-30.476191-30.476191V292.571429c0-18.285714 12.190476-30.47619 30.476191-30.476191s30.47619 12.190476 30.47619 30.476191v161.523809c0 18.285714 12.190476 30.47619 30.476191 30.476191h231.619047c18.285714 0 30.47619 12.190476 30.476191 30.47619 0 15.238095-15.238095 30.47619-30.476191 30.476191z" fill="#fff" p-id="2811"></path></svg>
                    <span id="time" style="font-weight: 600;color:#fff;font-size: 14px;"></span>
                    <span style="color:#fff;" id="admin">管理员</span>
                    <img src="static/img/default-pic-small.png" alt="..." class="img-circle">
                    <button type="button" class="btn btn-danger" onclick="logout()">退出登录</button>
                </div>
            </div>
        </div>
        <!-- body:内容 -->
        <div class="body">
            <!-- menu：菜单 -->
            <div class="menu">
                <!-- 引用Menu菜单组件 -->
                <iframe class="iframe" src="static/menu/Menu.html"></iframe>
            </div>
            <!-- card：卡片 使用iframe，实现网页的嵌套，这个地方一定要有：id="card" -->
            <div class="card">
                <iframe class="iframe" src="wellcome.html" name="card" id="card"></iframe>
            </div>

        </div>
    </div>
    <script>
        function getTime(){
            var myDate = new Date();
            var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
            var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
            var myToday = myDate.getDate(); //获取当前日(1-31)
            var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
            var myHour = myDate.getHours(); //获取当前小时数(0-23)
            var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
            var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
            var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var nowTime;

            nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
            //console.log(nowTime);
            $('#time').html(nowTime);
        };
        function fillZero(str){
            var realNum;
            if(str<10){
                realNum	= '0'+str;
            }else{
                realNum	= str;
            }
            return realNum;
        }
        setInterval(getTime,0);
    </script>
</body>

</html>